<template>
    <div class="createPost-container">
        <el-form ref="payForm" :model="payForm" class="form-container">
            <div class="createPost-main-container">
                <el-form-item prop="mchid" style="margin-bottom: 40px;" label-width="90px" label="商户号:">
                    <el-input v-model="payForm.mchid" :rows="1" class="article-textarea" autosize placeholder="请输入微信子商户号" />
                </el-form-item>
                <el-button v-loading="loading" style="margin-left: 10px;" type="primary" @click="submitForm">
                    保存
                </el-button>
            </div>
        </el-form>
    </div>
</template>

<script>
import { get as getPay, set as setPay } from '@/shop/api/pay/pay'

const defaultForm = {
    mchid: ''
}

export default {
    name: 'GoodsDelivery',
    components: {},
    data() {
        return {
            id: 0,
            loading: false,
            payForm: Object.assign({}, defaultForm)
        }
    },
    created() {

        const id = this.$route.query.id
        this.id = id

        this.fetchData()
        // Why need to make a copy of this.$route here?
        // Because if you enter this page and quickly switch tag, may be in the execution of the setTagsViewTitle function, this.$route is no longer pointing to the current page
        // https://github.com/PanJiaChen/vue-element-admin/issues/1221
    },
    methods: {
        fetchData() {
            getPay({ store_id: this.id }).then(response => {
                this.payForm.mchid = response.data.mchid
            }).catch(err => {
                console.log(err)
            })
        },
        submitForm() {
            this.$refs.payForm.validate(valid => {
                if (valid) {
                    this.loading = true
                    const data = Object.assign({}, this.payForm, { store_id: this.id })
                    setPay(data).then(response => {
                        this.$notify({
                            title: '成功',
                            message: '编辑成功',
                            type: 'success',
                            duration: 2000
                        })
                        // this.payForm.mchid = 'published'
                        this.loading = false
                    }).catch(err => {
                        console.log(err)
                        this.loading = false
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.createPost-container {
    position: relative;

    .createPost-main-container {
        padding: 40px 45px 20px 50px;

        .postInfo-container {
            position: relative;
            @include clearfix;
            margin-bottom: 10px;

            .postInfo-container-item {
                float: left;
            }
        }
    }

    .word-counter {
        width: 40px;
        position: absolute;
        right: 10px;
        top: 0px;
    }
}

.article-textarea ::v-deep {
    textarea {
        padding-right: 40px;
        resize: none;
        border: none;
        border-radius: 0px;
        border-bottom: 1px solid #bfcbd9;
    }
}
</style>
